﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<!-- 包含公共的JSP代码片段 -->
	
<title>餐馆王平台</title>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="${fp}/style/js/jquery.js"></script>
<script type="text/javascript" src="${fp}/style/js/page_common.js"></script>
<link href="${fp}/style/css/common_style_blue.css" rel="stylesheet" type="text/css">
<link rel="${fp}/stylesheet" type="text/css" href="${fp}/style/css/index_1.css" />
	<link href="${fp}/style/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align: center">
	<div id="all">
		<div id="menu">
			<!-- 显示菜品的div -->
			<div id="top">
				<ul>
					<!-- 循环列出餐品 -->
					<c:forEach items="${pageBean.list}" var="food">
						<li>
							<dl>
								<dt>
									<a href="/front?method=findFoodById&foodId=${food.foodId}">
										<img width="214px" height="145px" src="${pageContext.request.contextPath}${food.image}" />
									</a>
								</dt>
								<dd class="f1">
									<a href="/front?method=findFoodById&foodId=${food.foodId}">${food.foodName}</a>
								</dd>
								<dd class="f2">
									<a href="/front?method=findFoodById&foodId=${food.foodId}">&yen;${food.price}</a>
								</dd>
							</dl>
						</li>
					</c:forEach>
				</ul>
			</div>
			
			<!-- 底部分页导航条div -->
			<div id="foot">

						<span style="float:left; line-height:53PX; margin-left:-50px; font-weight:bold; cursor:pointer;">
							<span class="food-page" onclick="prev(${pageBean.pageNo});">&lt;&lt;</span>
						</span>
					
				
				<div id="btn">
					<ul>
						<!-- 参看 百度, 谷歌是 左 5 右 4 -->
						<c:forEach var="page" begin="1" end="${pageBean.totalPages}" varStatus="vs">
							<li>
								<a <c:if test="${page==pageBean.pageNo}">style='color:black;'</c:if>
								   href="/front?method=findFoodByPage&pageNo=${vs.index}">${page}
								</a>
							</li>
						</c:forEach>
					</ul>
				</div>

				<span style="float:right; line-height:53px; margin-right:10px; font-weight:bold;cursor:pointer;">
                    <span class="food-page" onclick="next(${pageBean.pageNo});">&gt;&gt;</span>
				</span>
				
			</div>
			
		</div>

		<!-- 右边菜系列表，菜品搜索框  -->
		<div id="dish_class">
			<div id="dish_top">
				<ul>
				<li class="dish_num"></li>
					<li>
						<a href="clientOrderList.html">
							<img src="${fp}/style/images/call2.gif" />
						</a>
					</li>
				</ul>
			</div>

			<div id="dish_2">
				<ul>
					<c:forEach items="${sessionScope.foodType}" var="foodType">
						<li>
							<a href="/front?method=findFoodByPage&typeName=${foodType.typeName}">${foodType.typeName}</a>
						</li>
					</c:forEach>
				</ul>
			</div>
			<div id="dish_3">
				<!-- 搜索菜品表单  -->
				<form action="/front?method=findFoodByPage" method="post">
					<table width="166px">
						<tr>
							<td>
								<input type="text" id="dish_name" name="foodName" class="select_value" value="${foodName}" />
							</td>
						</tr>
						<tr>
							<td><input type="submit" id="sub" value="" /></td>
						</tr>
						<tr>
							<td>
								<a href="/front?method=findFoodByPage">
									<img src="${fp}/style/images/look.gif" />
								</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		
	</div>
</body>
<script>
<%--	<c:if test="${pageBean.totalPages}||1">--%>
<%--	var foodPage ＝ document.querySelector(".foodPage")--%>
<%--	</c:if>--%>
	//上一页
	function prev(pageNo) {
		if(pageNo > 1) {
			location.href = "/front?method=findFoodByPage&pageNo=" + (pageNo-1);
		}
	}
	//下一页
	function next(pageNo) {
		if(pageNo < ${pageBean.totalPages}) {
			location.href = "/front?method=findFoodByPage&pageNo=" + (pageNo+1);
		}
	}
</script>
</html>
